import React, { forwardRef } from 'react';
import * as RadioPrimitive from '@radix-ui/react-radio-group';

// RadioGroup组件
const RadioGroup = forwardRef<HTMLDivElement, RadioPrimitive.RadioGroupProps>(({ className, ...props }, ref) => (
  <RadioPrimitive.Root
    ref={ref}
    className={`flex flex-col space-y-2 ${className}`}
    {...props}
  />
));

// RadioGroupItem组件
const RadioGroupItem = forwardRef<HTMLButtonElement, RadioPrimitive.RadioGroupItemProps>(({ className, ...props }, ref) => (
  <RadioPrimitive.Item
    ref={ref}
    className={`peer sr-only focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${className}`}
    {...props}
  />
));

// RadioGroupLabel组件
const RadioGroupLabel = forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(({ className, ...props }, ref) => (
  <label
    ref={ref}
    className={`flex items-center space-x-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${className}`}
    {...props}
  />
));

// RadioGroupIndicator组件
const RadioGroupIndicator = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={`h-4 w-4 flex items-center justify-center rounded-full border border-primary bg-background ${className}`}
    {...props}
  >
    <div className="h-2 w-2 rounded-full bg-primary data-[state=checked]:scale-100 data-[state=unchecked]:scale-0 transition-transform" />
  </div>
));

// 设置displayName
RadioGroup.displayName = RadioPrimitive.Root.displayName;
RadioGroupItem.displayName = 'RadioGroupItem';
RadioGroupLabel.displayName = 'RadioGroupLabel';
RadioGroupIndicator.displayName = 'RadioGroupIndicator';

export { RadioGroup, RadioGroupItem, RadioGroupLabel, RadioGroupIndicator };